<template>
  <el-dialog v-model="visible" title="📦 我的数据篮" width="90%">
    <div
      v-if="dataBasket.length === 0"
      style="text-align: center; color: #999; padding: 40px 0"
    >
      <el-empty description="数据篮为空，快去加入一些商品吧～" />
    </div>

    <el-table
      v-else
      :data="dataBasket"
      border
      max-height="600"
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column prop="num_iid" label="商品ID" width="200" />
      <el-table-column label="图片" width="100">
        <template #default="{ row }">
          <img
            :src="row.pic_url"
            alt="图片"
            style="width: 60px; height: 60px; object-fit: cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="商品标题" />
      <el-table-column prop="detail_url" label="商品链接" width="180">
        <template #default="{ row }">
          <a :href="row.detail_url" target="_blank" style="font-size: 12px"
            >查看</a
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="orginal_price"
        label="券前价"
        width="100"
        align="center"
      />
      <el-table-column
        prop="promotion_price"
        label="券后价"
        width="100"
        align="center"
      />
      <el-table-column prop="sales" label="销量" width="80" align="center" />
      <el-table-column prop="platform" label="平台" width="80" align="center" />
      <el-table-column
        prop="added_time"
        label="添加时间"
        width="140"
        align="center"
      />
      <el-table-column label="操作" width="100" align="center">
        <template #default="{ row }">
          <el-button
            size="small"
            type="danger"
            @click="() => $emit('remove', row)"
            plain
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗底部操作区 -->
    <template #footer v-if="dataBasket.length > 0">
      <div style="display: flex; justify-content: space-between; width: 100%">
        <el-button @click="$emit('clear')" size="small" type="danger">
          清空数据篮
        </el-button>
        <el-button @click="$emit('export')" size="small" type="primary">
          导出数据篮
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  dataBasket: Array,
});

const visible = ref(false);
defineExpose({
  show() {
    visible.value = true;
  },
});
</script>
